<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Unicorn Admin</title>
		<meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/dist/css/bootstrap-min.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/dist/css/bootstrap-responsive.min.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/dist/css/uniform.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/dist/css/select2.css" />		
		<link rel="stylesheet" href="${pageContext.request.contextPath}/dist/css/unicorn.main.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/dist/css/unicorn.grey.css" class="skin-color" />	
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
	<body>
				
		<div id="header">
			<h1><a href="./dashboard.html">独角兽管理员</a></h1>		
		</div>
			
		<div id="user-nav" class="navbar navbar-inverse">
            <ul class="nav btn-group">
               
                   <!-- 默认头像 -->
					<li><img src="${pageContext.request.contextPath}/dist/img/0.jpg"
					     style="border-radius:50%;width:30px;height:30px;margin-top:0px;"/></li>
					<%--  </c:if>
					<!-- 自定义头像 -->
					<c:if test="${sessionScope.users.adminImg != null} }"> 
					<li><img src="${pageContext.request.contextPath}/DownloadFileServlet?fileName=${sessionScope.users.adminImg}"
					     style="border-radius:50%;width:30px;height:30px;margin-top:0px;"/></li>
					 </c:if>  --%>
                <li><a href="#"><strong>${sessionScope.users.adminAccount }</strong></a></li>
                <li class="btn btn-inverse"><a title="" href="${pageContext.request.contextPath}/EduControllerByGyx?op=addminExit"><i class="icon icon-share-alt"></i> <span class="text">退出</span></a></li>
            </ul>
        </div>
            
		<div id="sidebar">
			<a href="#" class="visible-phone"><i class="icon icon-home"></i> 首页</a>
			<ul>
				<li class="active"><a href="${pageContext.request.contextPath}/mvc/index.jsp"><i class="icon icon-home"></i> <span>首页</span></a></li>
				<li class="submenu">
					<a href="#"><i class="icon icon-th-list"></i> <span>管理员事项</span> <span class="label">2</span></a>
					<ul>
						<li><a href="${pageContext.request.contextPath}/mvc/form-validation.jsp">管理员列表</a></li>
						<li><a href="${pageContext.request.contextPath}/mvc/form-addadmin.jsp">添加管理员</a></li>
					</ul>
				</li>
				<li class="submenu">
					<a href="#"><i class="icon icon-th-list"></i> <span>详细数据表</span> <span class="label">2</span></a>
					<ul>
						<li><a href="${pageContext.request.contextPath}/mvc/userstable.jsp">用户列表</a></li>
						<li><a href="${pageContext.request.contextPath}/mvc/articletable.jsp">文章列表</a></li>
					</ul>
				</li>
				<li>
					<a href="${pageContext.request.contextPath}/mvc/charts.jsp"><i class="icon icon-signal"></i> <span>数据信息统计</span></a>
				</li>		
			</ul>
		</div>
		
		<div id="style-switcher">
			<i class="icon-arrow-left icon-white"></i>
			<span>Style:</span>
			<a href="#grey" style="background-color: #555555;border-color: #aaaaaa;"></a>
			<a href="#blue" style="background-color: #2D2F57;"></a>
			<a href="#red" style="background-color: #673232;"></a>
		</div>	
		<div id="content">
			<div id="content-header">
				<h1>用户详情</h1>			
			</div>
			<div id="breadcrumb">
				<a href="index.jsp" title="Go to Home" class="tip-bottom"><i class="icon-home"></i> 主页面</a>
				<a href="#" class="current">用户列表</a>
			</div>
		<div class="container-fluid">
			<div class="row-fluid">
				<div class="span12">
					<div class="widget-box">
						<div class="widget-title">
							<h5>全部用户</h5>
						</div>
						<div class="widget-title">
							<input type="text" id="accountKey" name="accountKey"
								placeholder="搜索用户..."
								value="${requestScope.accountKey==null?'':requestScope.accountKey}" />
							<input type="button" id="searchBtn" value="搜索" />
						</div>
							<div class="widget-content nopadding">
								<table class="table table-bordered table-striped">
									<thead>
									<tr>
									<th>用户编号</th>
										<th>用户账号</th>
										<th>用户密码</th>
										<th>用户积分</th>
										<th>用户状态</th>
										<th>注册时间</th>
										<th>用户姓名</th>
										<th>用户电话</th>
										<th>用户邮箱</th>
										<th>操作</th>
										<th>管理员</th>
									</tr>
									</thead>
									
									<tbody id="allUsers">
								
								    </tbody>
									
									</table> 
								</div>
									<!-- 分页信息 -->
							         <div id="showPageInfo"></div>
							         <!-- 实现分页 -->
							        <div>
							        <div class="pagination Alternate" id="gotoPageDiv">	
                                      <ul id="pageItem">
					  
								    </ul>
								    </div>
							   </div> 
							
						</div>
					</div>
				</div>
				
				<div class="row-fluid">
					<div id="footer" class="span12">
						2012 &copy; Unicorn Admin. Brought to you by <a href="https://wrapbootstrap.com/user/diablo9983">diablo9983</a>
					</div>
				</div>
			</div>
		</div>
		
		
            
            <script src="${pageContext.request.contextPath}/dist/js/jquery.min.js"></script>
            <script src="${pageContext.request.contextPath}/dist/js/jquery.ui.custom.js"></script>
            <script src="${pageContext.request.contextPath}/dist/js/bootstrap-min.js"></script>
            <script src="${pageContext.request.contextPath}/dist/js/jquery.uniform.js"></script>
            <script src="${pageContext.request.contextPath}/dist/js/select2.min.js"></script>
            <script src="${pageContext.request.contextPath}/dist/js/jquery.dataTables.min.js"></script>
            <script src="${pageContext.request.contextPath}/dist/js/unicorn.js"></script>
            <script src="${pageContext.request.contextPath}/dist/js/unicorn.tables.js"></script>
	</body>
	<script>
	  var key="";
   //声明一个全局变量key
  $(function(){
	//赋值动作,各种监听事件
	//界面一进来就需要发送ajax请求用户列表
	$.get("${pageContext.request.contextPath}/EduControllerByGyx",{op:"usersByPage"},function(data){
		//显示数据写成一个方法,以后就不用在做拼接
		showUsers(data);
	},"json")
	//首页
	$(document).on("click",".first",function(){
		//发送ajax请求
		$.get("${pageContext.request.contextPath }/EduControllerByGyx",{op:"usersByPage",pageNo:1,pageSize:5,accountKey:key},function(data){
		//显示数据写成一个方法,以后就不用在做拼接
		showUsers(data);
	},"json")
	});
	
	//末页
	$(document).on("click",".last",function(){
		//获取末页值
		var totalPage = $("#totalPage").text();
		//发送ajax请求
		$.get("${pageContext.request.contextPath }/EduControllerByGyx",{op:"usersByPage",pageNo:totalPage,pageSize:5,accountKey:key},function(data){
		//显示数据写成一个方法,以后就不用在做拼接
		showUsers(data);
	},"json")
	});
	
	//下一页
	$(document).on("click",".next",function(){
		//获取当前页值
		var pageNo = $("#pageNo").text();
		//发送ajax请求
		$.get("${pageContext.request.contextPath }/EduControllerByGyx",{op:"usersByPage",pageNo:parseInt(pageNo)+1,pageSize:5,accountKey:key},function(data){
		//显示数据写成一个方法,以后就不用在做拼接
		showUsers(data);
	},"json")
	});
	
	//每一页
	$(document).on("click",".currentPage",function(){
		//获取当前选中的页码
		var pageNo = $(this).text();
		//发送ajax请求
		$.get("${pageContext.request.contextPath }/EduControllerByGyx",{op:"usersByPage",pageNo:pageNo,pageSize:5,accountKey:key},function(data){
		//显示数据写成一个方法,以后就不用在做拼接
		showUsers(data);
	},"json")
	});
	
	//跳转
	$(document).on("click",".turnto",function(){
		//获取number框的值
		var pageNo = $("#turntoId").val();
		//获取末页值
		var totalPage = $("#totalPage").text();
		//判断
		if(pageNo<1){
			pageNo=1;
			$("#turntoId").val(pageNo);
		}else if(pageNo > totalPage*1){
			pageNo=totalPage;
			$("#turntoId").val(pageNo);	
		}
		//发送ajax请求
		$.get("${pageContext.request.contextPath }/EduControllerByGyx",{op:"usersByPage",pageNo:pageNo,pageSize:5,accountKey:key},function(data){
		//显示数据写成一个方法,以后就不用在做拼接
		showUsers(data);
	},"json")
	});
    
	//搜索按钮的模糊查询事件
	$("#searchBtn").click(function(){
		//用户输入的模糊查询关键字
		key=$("#accountKey").val();
		
		//发送ajax请求  
		$.get("${pageContext.request.contextPath }/EduControllerByGyx",{op:"usersByPage",pageNo:1,pageSize:5,accountKey:key},function(data){
		
		//显示数据写成一个方法,以后就不用在做拼接
		showUsers(data);
	},"json");
		
	});
	
	
	//入口结束
	})
	
	 //修改用户状态
	 //注销
	 function logoutUser(userId){
		 $.get("${pageContext.request.contextPath}/EduControllerByGyx",{op:"logoutUser",userId:userId},function(data){
			 showUsers(data);
		 },"json");
	 }
	 //启用
	 function startUser(userId){
		 $.get("${pageContext.request.contextPath}/EduControllerByGyx",{op:"startUser",userId:userId},function(data){
			 showUsers(data);
		 },"json");
	 }

	 
	 //刷新显示用户信息
	 function showUsers(data){
		    //每次遍历前清空数据
			$("#allUsers").empty();
			$("#showPageInfo").empty();
			$("#pageItem").empty();
			//遍历
			$.each(data.data,function(n,users){
				var status="";
				var buttons='';
				if(users.userStatus == 1){
					status="正常";
					buttons='<a href="javascript:logoutUser('+users.userId+')" ><button class="btn btn-danger btn-primary btn-xs">注销</button></a>';
				}else{
					status="已注销";
					buttons='<a href="javascript:startUser('+users.userId+')" ><button class="btn btn-info btn-primary btn-xs">启用</button></a>';
				}
				$("#allUsers").append("<tr class=\"gradeX\">\r\n" + 
						"									<td>"+users.userId+"</td>\r\n" + 
						"									<td>"+users.userAccount+"</td>\r\n" + 
						"									<td>"+users.userPwd+"</td>\r\n" + 
						"									<td>"+users.userScore+"</td>\r\n" + 
						"									<td>"+status+"</td>\r\n" + 
						"									<td>"+users.userDate.substring(0,users.userDate.length-2)+"</td>\r\n" +
						"									<td>"+users.userName+"</td>\r\n" +
						"									<td>"+users.userPhone+"</td>\r\n" +
						"									<td>"+users.userMail+"</td>\r\n" +	
						"									<td>"+buttons+"</td>\r\n" +	
						"									<td>"+users.admin.adminAccount+"</td>\r\n" +
						"									</tr>");
			});
	
	 
	//显示分页信息
	$("#showPageInfo").append("<p>当前第<span id='pageNo'>"+data.pageNo+"</span>页/共<span id='totalPage'>"+data.totalPage+"</span>页/每页显示<span id='pageSize'>"+data.pageSize+"</span>条/共<span id='totalCount'>"+data.totalCount+"</span>条数据</p>");
	  //首页
	   if(1==data.pageNo){
		   $("#pageItem").append('<li class="disabled"><a href="#">首页</a></li>');
	   }else{
		   $("#pageItem").append('<li><a href="#" class="first">首页</a></li>');
	   }
	   //显示分页栏目
	   for(var i=1;i<=data.totalPage;i++){
		   if(i==data.pageNo){
			   $("#pageItem").append('<li class="active"><a href="#">'+i+'</a></li>');
		   }else{
			   $("#pageItem").append('<li><a href="#" class="currentPage">'+i+'</a></li>');
		   } 
	   }
	   //下一页
	   if(data.pageNo==data.totalPage){
		   $("#pageItem").append('<li class="disabled"><a href="#">下一页</a></li>');
	   }else{
		   $("#pageItem").append('<li><a href="#" class="next">下一页</a></li>');
	   }
	   //末页
	   if(data.pageNo==data.totalPage){
		   $("#pageItem").append('<li class="disabled"><a href="#">末页</a></li>');
	   }else{
		   $("#pageItem").append('<li><a href="#" class="last">末页</a></li>');
	   }
	   //跳转页
	    $("#pageItem").append('<li><a href="#"><input type="number" id="turntoId"  min="1" max="'+data.totalPage+'" style="height:15px"/></a></li>'); 
	    $("#pageItem").append('<li><a href="#" class="turnto">跳转</a></li>');
	 }
	 </script>
	 <style>
	 
	 #pageItem a{
	 height:24px;
	 text-align: center;
	 list-style:none;
	 float:left;
	 }
	  #allUsers td{	
	 text-align: center;	
	 }
	 #gotoPageDiv{
	 height:30px;
	 }
	 </style>
	 
</html>
